<template>
  <div class="mod-user">
    <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
    <!-- <el-button v-if="draggable" @click="batchSave">批量保存</el-button>
    <el-button type="danger" @click="batchDelete">批量删除</el-button> -->
    <el-button type="primary" @click="add1()">添加一级分类</el-button>
    <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" :draggable="draggable">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" @click.stop="add(data)" v-if="node.level <= 2"
            >添加子分类</el-button
          >
          <el-button type="text" @click.stop="edit(data)">修改</el-button>
          <el-button
            type="text"
            @click.stop="dialogFormVisible = true"
            v-if="node.childNodes.length == 0"
            >删除</el-button
          >
        </span>
      </span>
    </el-tree>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" prop="productUnit">
          <el-input v-model="ruleForm.productUnit"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData()">确 定</el-button>
      </div>
    </el-dialog>

    <div id="main" style="width: 750px; height: 400px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      draggable:false,
      title: "", //弹出框的一级显示
      dialogFormVisible: false,
      formLabelWidth: "60px",
      ruleForm: {
        name: "",
        productUnit: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个汉字",
            trigger: "blur",
          },
        ],
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogType: "", //对话框类型
    };
  },
  methods: {
    getData() {
      this.$http({
        url: this.$http.adornUrl1("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        // console.log("成功获取到菜单数据...", data);
        this.data = data.data;
      });
    },
    add(data) {
      // console.log(data)
      this.dialogType = "add";
      this.dialogFormVisible = true;
      this.title = "添加子分类";
      this.ruleForm.parentCid = data.catId;
      this.ruleForm.catLevel = data.catLevel * 1 + 1;
      this.ruleForm.catId = null;
      this.ruleForm.name = "";
      this.ruleForm.icon = "";
      this.ruleForm.productUnit = "";
      this.ruleForm.sort = 0;
      this.ruleForm.showStatus = 1;
    },
    add1(data) {
      this.dialogType = "add";
      this.dialogFormVisible = true;
      this.title = "添加一级分类";
      this.category.parentCid = 0;
      this.category.catLevel = 1;
      this.category.catId = null;
      this.category.name = "";
      this.category.icon = "";
      this.category.productUnit = "";
      this.category.sort = 0;
      this.category.showStatus = 1;
    },
    edit(data) {
      this.dialogType = "edit";
      this.dialogFormVisible = true;
      this.title = "修改";
      this.$http({
        url: this.$http.adornUrl1(`/product/category/info/${data.catId}`),
        method: "get",
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.ruleForm = data.data;
        // this.ruleForm.name=data.data.name
        // this.ruleForm.productUnit=data.data.productUnit
      });
    },
    submitData() {
      this.dialogFormVisible = false;
      if (this.dialogType == "add") {
        this.addCategory();
      }
      if (this.dialogType == "edit") {
        this.editCategory();
      }
    },
    addCategory() {
      console.log("add");
      this.$http({
        url: this.$http.adornUrl1("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.ruleForm, false),
      }).then(({ data }) => {
        // this.$message({
        //   message: "菜单保存成功",
        //   type: "success"
        // });
        console.log(data);
        // //关闭对话框
        // this.dialogVisible = false;
        // //刷新出新的菜单
        this.getData();
        // //设置需要默认展开的菜单
        // this.expandedKey = [this.category.parentCid];
      });
    },
    editCategory() {
      console.log("edit");
    },
    initData() {
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
        ],
      };
      var myChart = echarts.init(document.getElementById('main'));
      console.log(myChart)
      myChart.setOption(option)
    },
  },
  activated() {
    this.getData();
    this.initData();
  },
};
</script>
